<template>
    <div class="w-full lg:h-clinc bg-clinc-bg flex justify-center">
        <ul class="list 2xl:w-3/5 xl:w-4/5 md:w-full flex items-center flex-col px-5 lg:px-0">
            <li
                class="flex flex-col lg:flex-row md:py-12 py-3 items-center"
                v-for="(item, index) in state.home.menzhenbu"
                :key="index.toString()"
            >
                <div class="flex-1 order-2">
                    <div class="md:text-2xl text-xl mt-5">{{ item.title }}</div>
                    <div
                        class="md:text-xl text-base mt-3"
                        v-for="(item1, index1) in item.contents"
                        :key="index1.toString()"
                    >{{ item1 }}</div>
                </div>
                <div class="flex-1 lg:w-450 lg:h-450 overflow-hidden order-1">
                    <img :src="item.image" class="lg:h-450 my-3" />
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { state } from "@utils/store";

</script>

<style lang="scss">
@media screen and (min-width: 1024px) {
    .list li:nth-child(2) > div:nth-child(1) {
        order: 1;
    }
    .list li:nth-child(2) > div:nth-child(2) {
        order: 2;
    }
    .list li:nth-child(1) > div:nth-child(2) {
        margin: 0 40px 0 20px;
    }
    .list li:nth-child(1) > div:nth-child(1) {
        margin: 0 20px 0 20px;
    }

    .list li:nth-child(2) > div:nth-child(1) {
        margin: 0 20px 0 40px;
    }
    .list li:nth-child(2) > div:nth-child(2) {
        margin: 0 20px 0 20px;
    }
}

.list li:nth-child(1) {
    color: white;
}
</style>